<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="1200px"
    top="5vh"
  >
    <MainContainer class="p-5 h-[70vh]">
      <MyQuery
        v-model:params="params"
        :options="queryOptions"
        @query="handleQuery"
        @reset="handleReset"
      ></MyQuery>
      <el-table
        ref="multipleTable"
        :data="list"
        :header-cell-style="
          () => ({
            backgroundColor: '#f3f3f3',
          })
        "
        border
        @select-all="onSelectAll"
        @selection-change="handleSelectionChange"
        @row-click="onSelectOp"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="col in columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          align="center"
          header-align="center"
          :formatter="col.formatter"
          :width="col.width"
          :min-width="col.minWidth"
        >
          <template #default="scope">
            <template v-if="col.customRender">
              <CustomRender
                :render="() => col.customRender(scope.row)"
              ></CustomRender>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:currentPage="params.page"
        v-model:page-size="params.limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="justify-end mt-2"
        @size-change="handleQuery"
        @current-change="handleQuery"
      />
    </MainContainer>
    <template #footer>
      <div class="flex">
        <el-button size="large" class="flex-1" @click="handleClose">
          取消
        </el-button>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          class="flex-1"
          @click="handleBindingOfficialAccount"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import MainContainer from "@/components/MainContainer.vue";
import MyQuery from "@/components/MyQuery.vue";
import CustomRender from "@/components/CustomRender";
import useCRUD from "@/composables/useCRUD";
import { toRefs } from "vue";
import parseTime from "@/utils/parseTime.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchList } from "@/api/wx-template";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const { visible } = toRefs(props);

const emit = defineEmits(["update:visible", "confirm", "confirm1"]);

function handleClose() {
  emit("update:visible", false);
  multipleTable.value.clearSelection();
  params.value = { page: 1, limit: 10 };
  handleQuery();
}

//单选
const multipleTable = ref([]);

let deviceIdList = ref("");

let multipleSelection = ref([]);

function onSelectAll() {
  multipleTable.value.clearSelection();
}

function handleSelectionChange(rows) {
  if (rows.length > 1) {
    const newRows = rows.filter((it, index) => {
      if (index == rows.length - 1) {
        multipleTable.value.toggleRowSelection(it, true);
        return true;
      } else {
        multipleTable.value.toggleRowSelection(it, false);
        return false;
      }
    });
    multipleSelection.value = newRows;
  } else {
    multipleSelection.value = rows;
  }
  deviceIdList.value = multipleSelection.value.length
    ? multipleSelection.value[0]
    : "";
}

function onSelectOp(row) {
  multipleTable.value.clearSelection();
  multipleTable.value.toggleRowSelection(row, true);
  multipleSelection.value = [];
  multipleSelection.value.push(row);
}

async function handleBindingOfficialAccount() {
  if (deviceIdList.value !== "") {
    ElMessageBox.confirm("确认绑定公众号吗", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        emit("update:visible", false);
        emit("confirm", deviceIdList.value.id);
        emit("confirm1", true);
        multipleTable.value.clearSelection();
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消",
        });
        emit("update:visible", true);
      });
  } else {
    ElMessage("请选择公众号");
  }
  params.value = { page: 1, limit: 10 };
  handleQuery();
}

const queryOptions = [
  {
    prop: "name",
    placeholder: "微信号名称",
  },
];

const columns = [
  {
    prop: "name",
    label: "微信公众号名称",
  },
  {
    prop: "appid",
    label: "微信公众号appid",
  },
  {
    prop: "secret",
    label: "微信公众号secret",
  },
  {
    prop: "templateId",
    label: "推送模板ID",
  },
  {
    prop: "updateTime",
    label: "创建日期",
    formatter(row) {
      const date = new Date(row.updateTime);
      return parseTime(date);
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
};
const { params, handleQuery, list, handleReset, total, loading } =
  useCRUD(crudOptions);

handleQuery();
</script>
